<script setup lang="ts">
import ByIcon from "./ByIcon.vue";

const emits = defineEmits<{
  change: [checked: boolean];
}>();

const { checked = undefined } = defineProps<{
  value?: string | number;
  disabled?: boolean;

  checked?: boolean;
}>();

const model = defineModel<boolean>();

const handleChange = () => {
  if (checked === undefined) {
    model.value = !model.value;
    emits("change", model.value);
  }
};
</script>

<template>
  <view class="inline-flex items-center" @tap="handleChange">
    <view class="relative">
      <checkbox
        class="absolute top-0 left-0 w-full h-full opacity-0"
        :value="value"
        :checked="checked ?? model"
        :disabled="disabled"
      />
      <ByIcon :size="36" :name="checked ?? model ? 'RadioChecked' : 'Radio'" />
    </view>

    <slot />
  </view>
</template>
